import React, { PureComponent } from 'react';
import { Form, Input, Modal } from 'antd';
const FormItem = Form.Item;
import DriverModel from "./driverModel"
import DeviceModel from "./deviceModel"
class CustomizedForm extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      driverVisible: false,
      deviceVisible: false,
      driverValue: {},
      deviceValue: {},
    }
  }
  okHandle = () => {
    const { form, handleAdd } = this.props;
    const { driverValue, deviceValue } = this.state
    form.validateFields((err, fieldsValue) => {
      if (err) return;
      form.resetFields();
      const data = {
        ...fieldsValue,
        ...driverValue,
        ...deviceValue
      }
      this.setState({
        driverValue: {},
        deviceValue: {}
      })
      console.log(data)
      handleAdd(data);
    });
  };
  /**
 * 司机部分
 */
  handleDriverClick = () => {
    this.setState({
      driverVisible: true
    })
  }
  handleDriverOk = (data) => {  
    const {form} =this.props  
    if (data.length) {
      const value = {
        driverId: data[0].id,
        driverName: data[0].driverName
      }
      this.setState({
        driverVisible: false,
        driverValue: value,
      });
      form.setFieldsValue({
        driverName: value.driverName
      })
    } else {
      this.setState({
        driverVisible: false
      });
    }
  }
  handleDriverCancel = () => {
    this.setState({
      driverVisible: false,
    });
  }
  /**
   * 设备部分
   */
  handleDeviceClick = () => {
    this.setState({
      deviceVisible: true
    })
  }
  handleDeviceOk = (data) => {
    const { form } = this.props  
    if (data.length) {
      const value = {
        iccid: data[0].iccid,
        obdDeviceId: data[0].id
      }
      this.setState({
        deviceVisible: false,
        deviceValue: value,
      });
      form.setFieldsValue({
        iccid: value.iccid
      })
    } else {
      this.setState({
        deviceVisible: false
      });
    }
  }
  handleDeviceCancel = () => {
    this.setState({
      deviceVisible: false,
    });
  }
  render() {
    const { modalVisible, form, handleModalVisible } = this.props;
    const handleDriverFun = {
      handleOk: this.handleDriverOk,
      handleCancel: this.handleDriverCancel
    }
    const handleDeviceFun = {
      handleOk: this.handleDeviceOk,
      handleCancel: this.handleDeviceCancel
    }
    return (
      <Modal
        destroyOnClose //关闭时销毁 Modal 里的子元素
        title="添加车辆信息"
        visible={modalVisible}
        onOk={this.okHandle}
        onCancel={() => handleModalVisible()}
      >
        <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="车辆vin码">
          {form.getFieldDecorator('vin', {
            rules: [{ required: true, message: '请输入车辆vin码' }],
            initialValue: '',
          })(<Input placeholder="请输入" autoComplete="off" />)}
        </FormItem>
        <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="车辆品牌">
          {form.getFieldDecorator('carBrand', {
            rules: [{ required: true, message: '请输入车辆品牌' }],
            initialValue: '',
          })(<Input placeholder="请输入" autoComplete="off" />)}
        </FormItem>
        <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="使用方式">
          {form.getFieldDecorator('useWay', {
            rules: [{ required: true, message: '请输入使用方式' }],
            initialValue: '',
          })(<Input placeholder="请输入" autoComplete="off" />)}
        </FormItem>
        <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="车牌号">
          {form.getFieldDecorator('plateNo', {
            rules: [{ required: true, message: '请输入车牌号' }],
            initialValue: '',
          })(<Input placeholder="请输入" autoComplete="off" />)}
        </FormItem>
        <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="imei">
          {form.getFieldDecorator('imei', {
            rules: [{ required: true, message: '请输入imei' }],
            initialValue: '',
          })(<Input placeholder="请输入" autoComplete="off" />)}
        </FormItem>
        <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="司机姓名">
          {form.getFieldDecorator('driverName', {
            rules: [{ required: true, message: '请选择司机' }],
            initialValue: '',
          })(<Input placeholder="请输入" autoComplete="off" onFocus={this.handleDriverClick} />)}
        </FormItem>
        <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="设备iccid">
          {form.getFieldDecorator('iccid', {
            rules: [{ required: true, message: '请选择设备' }],
            initialValue: '',
          })(<Input placeholder="请输入" autoComplete="off" onFocus={this.handleDeviceClick} />)}
        </FormItem>
        {
          this.state.driverVisible ?
            <DriverModel visible={this.state.driverVisible} {...handleDriverFun} />
            : null
        }
        {
          this.state.deviceVisible ?
            <DeviceModel visible={this.state.deviceVisible} {...handleDeviceFun} />
            : null
        }
      </Modal>
    );
  }
}
const CreateForm = Form.create()(CustomizedForm);

export default CreateForm;
